<script setup lang="ts">
import { reactive, ref } from 'vue'
// 表单对齐方式
const labelPosition = ref('top')
// 忘记密码的接口
interface forgetData {
  account: string | null
  email: string
  password: string
  nextPassword: string
}
// 忘记密码的表单
const forgetData: forgetData = reactive({
  account: null,
  email: '',
  password: '',
  nextPassword: ''
})
// 控制弹窗默认关闭
const state = reactive({
  forgetPasswordDialog: false,
  changePasswordDialog: false
})
// 打开弹窗
const open = () => {
  state.forgetPasswordDialog = true
}
// 打开修改密码弹窗
const openChangePwd = () => {
  state.forgetPasswordDialog = false
  state.changePasswordDialog = true
}
// 表单校验规则
const rules = reactive({
  account: [{ required: true, message: '请输入您的注册账号', trigger: 'blur' }],
  email: [{ required: true, message: '请输入您的注册邮箱', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入您想修改的密码', trigger: 'blur' }
  ],
  nextPassword: [
    { required: true, message: '请再次确认您的新密码', trigger: 'blur' }
  ]
})

defineExpose({
  open
})
</script>

<template>
  <!-- 忘记密码 -->
  <el-dialog
    v-model="state.forgetPasswordDialog"
    title="忘记密码"
    width="400px"
  >
    <el-form
      class="login-form"
      :model="forgetData"
      :labelPosition="labelPosition"
      :rules="rules"
    >
      <el-form-item label="账号" prop="account">
        <el-input v-model="forgetData.account" placeholder="输入您的注册账号" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="forgetData.email" placeholder="输入您的个人邮箱" />
      </el-form-item>
    </el-form>
    <!-- 底部内容 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="state.forgetPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="openChangePwd">下一步</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改密码 -->
  <el-dialog
    v-model="state.changePasswordDialog"
    title="修改密码"
    width="400px"
  >
    <el-form class="login-form" :label-position="labelPosition" :rules="rules">
      <el-form-item label="输入您的新密码" prop="password">
        <el-input
          v-model="forgetData.password"
          placeholder="输入您的新密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="再次确认您的新密码" prop="nextPassword">
        <el-input
          v-model="forgetData.nextPassword"
          placeholder="再次确认您的新密码"
          show-password
        />
      </el-form-item>
    </el-form>
    <!-- 底部内容 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.changePasswordDialog = false">取消</el-button>
        <el-button type="primary" @click=""> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="less"></style>
